﻿<!-- 百度地图编辑页面 -->

<style> 
#dev_list_panle_div{ position:absolute; left:0px; top:0px; background:#FFFFFF; width:300px;height:100% }
#overlay_tool { position:absolute; left:310px; top:10px; background:#FFFFFF; width:100%;background-color:rgba(320,138,138,0)}
</style>

<div id="map_box" class ="baidu-maps" style="width: 100%;height: 100%;"></div>

<div class="layui-coutainer" id="dev_list_panle_div" >
  <div  style="overflow: auto;height: 10px;">
    <!-- 隐藏设备栏 -->
    <i style="position: absolute;right: 0" class="layui-icon layui-icon-close" onclick="dev_panle_sw('hide')"></i>
  </div>
  <div class="layui-row" style="padding: 2px;">
    <form class="layui-form layui-form-pane " action="" lay-filter="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div class="layui-input-inline" style="width: 350px">
            <input lay-filter="radio_filter" type="radio" name="kind" value="building" title="建筑" checked>
            <input lay-filter="radio_filter" type="radio" name="kind" value="scanner" title="基站" >
            <!-- <input lay-filter="radio_filter" type="radio" name="kind" value="camera" title="摄像头" > -->
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="layui-row" style="padding: 0px;background-color:#009688;text-align: center;">
    <button id="overlay_kind_chosed" class="layui-btn layui-btn-sm layui-btn-fluid">全部</button>
  </div>
  <form class="layui-form layui-form-pane" action="" style="width:auto;height: 20px;padding: 2px">
      <div class="layui-form-item">
          <div class="layui-inline">
              <div class="layui-input-inline">
                  <input type="text" lay-verify="required" name="search_key" lay-reqtext="请输入搜索内容" placeholder="设备ID/名称" autocomplete="off" class="layui-input" style="width:auto;height: 30px">
              </div>
              <div class="layui-inline" >
                  <a type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="dev-search-btn" >搜索</a>
              </div>
          </div>
      </div>
  </form>
  <div class="" id="dev_list_panle">
    <div class="layui-card-body" style="padding: 2px;border: 1px">
      <table id="overlay_list_show" lay-filter="overlay_list_show"></table>
    </div>
  </div>
</div>

<button id="show_sw" class="layui-btn" onclick="dev_panle_sw('show')" style="position: absolute;left:-20px;top: 40%;height: 150px;width: 10px;display: none;"><i class="layui-icon">&#xe66b;</i></button>
<script type="text/html" id="obj_handle_bar">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs" lay-event="reset">重置</a>
</script>

<div id="overlay_tool">
  <form class="layui-form layui-form-pane " action="" id="overlay_chose_form" lay-filter="overlay_chose_form">
    <div class="layui-form-item">
      <div class="layui-inline" >
        <div class="layui-input-inline">
          <input type="text"  id="search_address"  placeholder="搜索地址" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
        <a type="button" class="layui-btn" onclick="search_map($('#search_address').val())">搜索</a>
     </div>
    </div>
  </form>
</div>

<div class="layui-btn-group" style="position: absolute;right: 10px;top: 10px">
  <a class="layui-btn" id="" onclick="turn_to_page('map_data')" href="#map_data"><i class="layui-icon layui-icon-return" style="font-size: 12px"></i></a>
</div>

<!-- 添加数据表单开始 -->
  <form  class="layui-form layui-form-pane " action="" id="add_data_form" lay-filter="add_data_form" style="padding: 20px;display: none;">
    <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">名称</label>
          <div class="layui-input-inline">
            <input type="text" name="name" readonly="" lay-verify="required" lay-reqtext="必填项!" placeholder="保存后，禁止重复/更改" autocomplete="off" class="layui-input">
          </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">编号</label>
          <div class="layui-input-inline">
            <input type="text" name="name_id" placeholder="自定义编号" autocomplete="off" class="layui-input">
          </div>
        </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green">类型</label>
        <div class="layui-input-inline">
          <input type="text" name="kind"  autocomplete="off" placeholder="" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item" style="display: none;">
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green">覆盖物类型</label>
        <div class="layui-input-inline">
          <input type="text" name="overlay_kind"  autocomplete="off" placeholder="" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item" id="fix_to" style="display: none;">
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green">所属建筑</label>
        <div class="layui-input-inline">
          <input type="text" name="building_name" list="building_list"  autocomplete="off" placeholder="" class="layui-input">
          <datalist id="building_list"></datalist>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green">位置</label>
        <div class="layui-input-inline">
          <input type="text" name="location" readonly="" lay-verify="required" lay-reqtext="请在地图上点击选取安装位置!"   autocomplete="off" placeholder="请在地图上点击选取安装位置" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="add_submit" >提交</button>
    </div>
  </form>

  <!-- 添加数据表单结束 -->


<!-- 修改数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="edit_data_form" lay-filter="edit_data_form" style="padding: 20px;display: none;">
  <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green">名称</label>
        <div class="layui-input-inline">
          <input type="text" name="name" readonly="" lay-verify="required" lay-reqtext="必填项!" placeholder="保存后，禁止重复/更改" autocomplete="off" class="layui-input">
        </div>
      </div>
  </div>
  <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green">编号</label>
        <div class="layui-input-inline">
          <input type="text" name="name_id" placeholder="自定义编号" autocomplete="off" class="layui-input">
        </div>
      </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">类型</label>
      <div class="layui-input-inline">
        <input type="text" name="kind"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">覆盖物类型</label>
      <div class="layui-input-inline">
        <input type="text" name="overlay_kind"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item" id="e_fix_to" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">所属建筑</label>
      <div class="layui-input-inline">
        <input type="text" name="building_name" autocomplete="off" placeholder="" class="layui-input">
        <!-- <datalist id="building_list"></datalist> -->
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">位置</label>
      <div class="layui-input-inline">
        <input type="text" name="location" readonly="" autocomplete="off" placeholder="请在地图上点击选取安装位置" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid layui-btn-normal" style="width: 90%" lay-submit="" lay-filter="edit_submit" >重置</button>
  </div>
</form>
<!-- 百度地图的相关调用，定位打点，地址解析等 -->
<script type="text/javascript" src="/static/bd_map.js"></script>

<script type="text/javascript">


$('.layui-body').attr('style','padding:0px;bottom:0px;top:60px;left:0px')

var dev_panle_sw=function(command){
  if(command=='hide'){
    $('#dev_list_panle_div').hide()
    $('#show_sw').show()
  }else{
    $('#dev_list_panle_div').show()
    $('#show_sw').hide()
  } 
}


// 设备列表数据加载函数
var show_obj_table=function(table_data){
  table.render({
    elem: '#overlay_list_show',
    data: table_data,
    id:'overlay_list',
    skin:'nob',
    size:'sm',
    height: 'full-210',
    cols: [[
        {type: "checkbox", fixed: "left"},
        {field: 'name', title: '名称',sort:true},
        {field: 'device_id', title: 'ID',sort:true},
        {title: '状态', minWidth: 110, fixed: "right", align: "center",templet: function(d){
          var button='<p style="color:blue;font-weight:bold">已添加</p>'
          var position=eval('('+d.position+')')
          if(position==0 | position=='' | position.map==''){
            button='<p style="font-weight:bold">未添加</p>'
          }
          return button
        }}
    ]],
    // page: true,
    limit:10000000
  });
}

// 基础数据加载
var building=[],scanner=[],camera=[];
var get_overlay_func=function(){
  $.ajax({
        type: 'GET',
        url:"/overlay_to_map/?what=get_overlay",
        async:true,
        dataType: 'json',
        success: function(data) {
          console.log('success',data)
          form.render()
          map_to_edit=layui.data('map_to_edit').map_to_edit
          map_to_edit=eval('('+map_to_edit+')')
          // show_map_content(map_to_edit)
          for(var k in data){
            var detail=data[k]
            for(var i=0;i<detail.length;i++){
              var position=detail[i].position
              if(position=='0' | position==''){
                eval(k).push(detail[i])
              }else{
                position=eval('('+position+')')

                if(position.map==map_to_edit.name | position.map==''){
                  eval(k).push(detail[i])
                }
              }
            }
          }
          console.log(building)
          show_obj_table(building)
          var name_num='建筑'+'('+building.length.toString()+')'
          $('#overlay_kind_chosed').text(name_num)
        },
        error:function(e){
          console.log(e)
        }
    });
}

get_overlay_func()


// 选择覆盖物类型
var chose_overlay_kind='building';
var key_filed='name'

form.on('radio(radio_filter)',function(obj){
  console.log(eval(obj.value))
  chose_overlay_kind=obj.value
  if(chose_overlay_kind!=='building'){
    key_filed='device_id'
  }else{
    key_filed='name'
  }
  var kind_ch={'scanner':'基站','building':'建筑','camera':'摄像头'}
  var name_num=kind_ch[obj.value]+'('+eval(obj.value).length.toString()+')'
  $('#overlay_kind_chosed').text(name_num)
  show_obj_table(eval(obj.value))
})


// 监听设备列表点击
var checkDiv=new Array();
table.on('row(overlay_list_show)', function(obj){
  console.log(obj)
  layer.closeAll()
  click_dev_id(obj)
  
});

// -----点击设备链表，勾选功能--------//
var chosed_overlay
var click_dev_id=function(obj){//选中行同步选中复选按钮
  var tr = obj.tr;
  var div = tr.find("div.layui-unselect");
  //checkDiv为定义的属性用来缓存当前点击的行是否选中状态，未选择的选中，选中的取消选中，并进行相应的地图打点处理
  // console.log(obj.data.device_id)
  if(!checkDiv[obj.data[key_filed]]) {
    checkDiv[obj.data[key_filed]] = obj;
    chosed_overlay=obj.data
    div.addClass("layui-form-checked");
    var position=eval('('+obj.data.position+')')
    if(obj.data.position!=='0' && obj.data.position!=='' && position.map!==''){
      add_marker_bdmap(obj.data,chose_overlay_kind)
      open_edit_data_panel(obj.data)
    }else{
      // 开启地图点击事件
       map.addEventListener('click', map_click_event);
       layer.msg('请在地图上点击选取安装位置')
       open_add_data_panel(chosed_overlay)
    }
    
  } else {
    // 注销地图点击事件
    map.removeEventListener('click', map_click_event);
    div.removeClass("layui-form-checked");
    delete checkDiv[obj.data[key_filed]];
    remove_marker_bdmap(obj.data[key_filed])
    chosed_overlay=null
  }
}

// 打开指定已添加的覆盖物面板
var open_edit_data_panel=function(overlay){
  layer.open({
    type: 1
    ,title:'覆盖物详情'
    // ,area:['400px','360px']
    ,offset:'r'  
    ,closeBtn:1
    ,id: 'edit_overlay' //防止重复弹出
    ,content:$('#edit_data_form')
    ,shade: 0 //不显示遮罩
    ,success:function(){
      var position=eval('('+overlay.position+')')
      overlay.building_name=position.building
      overlay.location=position.location
      overlay.overlay_kind=chose_overlay_kind
      if(chose_overlay_kind!=='building'){
        $('#e_fix_to').show()
        overlay.name_id=overlay.device_id
      }else{
        $('#e_fix_to').hide()

      }
      if(overlay.name==''){
        overlay.name=overlay.device_id
      }
      form.val('edit_data_form',overlay)
    }
  });
}

// 打开指定待添加的覆盖物面板
var open_add_data_panel=function(overlay){
  form.render()
  layer.open({
    type: 1
    ,title:'覆盖物设置'
    // ,area:['400px','360px']
    ,offset:'r' 
    ,closeBtn:1
    ,id: 'add_overlay' //防止重复弹出
    ,content:$('#add_data_form')
    ,shade: 0 //不显示遮罩
    ,success:function(){
      overlay.overlay_kind=chose_overlay_kind
      // console.log(overlay,chose_overlay_kind)
      
      if(chose_overlay_kind!=='building'){
        $('#fix_to').show()
        $('#building_list').empty()
        for(var i=0;i<building.length;i++){
          var option='<option>'+building[i]['name']+'</option>'
          $('#building_list').append(option)
        }
        overlay.name_id=overlay.device_id
      }else{
        $('#fix_to').hide()
      }
      if(overlay.name==''){
        overlay.name=overlay.device_id
      }
      form.val('add_data_form',overlay)
      
    }
    ,cancel:function(obj){
      console.log('cancel')
      remove_marker_bdmap(overlay[key_filed])

    }
  });
}

// 开启地图点击拾取坐标功能，点击之后，在相应位置标注图标

var map_click_event=function(e){
  if(chosed_overlay==null){
      layer.msg('请选择要添加的覆盖物')
      return
    }
  var point=e.point.lng + ',' + e.point.lat
  chosed_overlay.overlay_kind=chose_overlay_kind
  chosed_overlay.position=JSON.stringify({'location':point})
  remove_marker_bdmap(chosed_overlay[key_filed])
  add_marker_bdmap(chosed_overlay,chose_overlay_kind)
  // console.log('点击位置经纬度：' + point);
  form.val('add_data_form',{'location':point})
}


// ----显示指定地图全部覆盖物start---- //
var show_map_content=function(map_data){
  var content=map_data.content
  var overlay=eval('('+map_data.overlay+')')
  console.log(overlay)
  if(overlay!=0){
    for(var k in overlay){
      for(var i=0;i<overlay[k].length;i++){
        
        var name=overlay[k][i].name
        if (k!=='building'){
          name=overlay[k][i].name_id
        }
        var overlayonmap=get_overlay_detail(k,name)

        add_marker_bdmap(overlayonmap,k)
      }
    }
  }
}
// ----显示地图内容end---- //



// 获取覆盖物详情
var get_overlay_detail=function(kind,target){
  var overlay=eval(kind)
  var detail;
  for(var i=0;i<overlay.length;i++){
    if(overlay[i].name==target | overlay[i].device_id==target){
      detail=overlay[i]
    }
  }
  return detail
}


// 点击地图，添加标准图标


// ----添加覆盖物上传后台功能start----//
var ajax_url='overlay_to_map'
form.on('submit(add_submit)',function(obj){
  var result = obj.field
  result.map_name=map_to_edit.name
  console.log(result)
  layer.confirm("确认要添？",
                {btn: ['是', '否']}, 
                function (index) {
                  ajax_func(result,ajax_url,'add_overlay')
                })
  
  return false
})

// ----添加覆盖物上传后台功功能end----//


// ----重置覆盖物上传后台功能start----//
form.on('submit(edit_submit)',function(obj){
  
    var result = obj.field
    // console.log(result)
    result.map_name=map_to_edit.name  
    console.log(result)
    layer.confirm("确认要重置？",
                {btn: ['是', '否']}, 
                function (index) {
                  ajax_func(result,ajax_url,'reset_overlay')
                })
    
    return false
})

// ----重置覆盖物上传后台功功能end----//



var ajax_func=function(base_info,url,handle_kind){
  base_info=JSON.stringify(base_info);
  // console.log(base_info)
  $.ajax({
    type: 'POST',
    data:{base_info},
    url:"/"+url+"/?what="+handle_kind,
    async:true,
    dataType: 'json',
    success: function(res) {
      console.log(res)
      if (res.code==1000){
        var data=res.data
        map_to_edit=data
        layui.data('map_to_edit',{key:'map_to_edit',value:JSON.stringify(map_to_edit)})
        layer.msg('操作成功')
        location.reload()
      }else{
        layer.msg(res.error)
      }  
    },
  })
}


// 监听设备搜索操作
form.on('submit(dev-search-btn)', function (data) {

  var search_key = data.field['search_key'];
  if(search_key!==''){
    // 调用index页面搜索函数
    var search_result=search_func(device,search_key,'user_name','device_id')
    // 表格重载
    show_obj_table(search_result)
  }else{
    show_obj_table(device)
  }
  return false;
});

</script>